import styles from './login.module.scss';
import initLoginBg from "./init.ts";
import {ChangeEvent, useEffect, useState} from "react";
import {Button, Input, Space} from 'antd';


export default () => {
    // 加载完这个组件之后，加载背景
    useEffect(()=>{
        initLoginBg();
        window.onresize = function(){initLoginBg()};
    },[]);

    // 获取用户输入的信息
    const [usernameVal,setUsernameVal] = useState(""); // 定义用户输入用户名这个变量
    const [passwordVal,setPasswordVal] = useState(""); // 定义用户输入密码这个变量

    // 用户名输入的事件
    const usernameChange = (e:ChangeEvent<HTMLInputElement>)=>{
        // 获取用户输入的用户名
        console.log('获取用户输入的用户名', e.target.value);
        // 修改usernameVal这个变量为用户输入的那个值。 以后拿到usernameVal这个变量就相当于拿到用户输入的信息。
        setUsernameVal(e.target.value);
    }

    // 密码输入的事件
    const passwordChange = (e:ChangeEvent<HTMLInputElement>)=>{
        // 获取用户输入的密码
        console.log('获取用户输入的密码', e.target.value);
        setPasswordVal(e.target.value);
    }

    // 处理登录的函数
    const handleLogin = () => {
        // 在这里添加登录逻辑
        console.log('.old.20240430, Login with:', [usernameVal, passwordVal] );
    }

    return (
        <div className={styles.loginPage}>
            {/* 存放背景 */}
            <canvas id="canvas" style={{display:"block"}}></canvas>
            {/* 登录盒子 */}
            <div className={styles.loginBox+ " loginbox"}>
                {/* 标题部分 */}
                <div className={styles.title}>
                    <h1>前端乐哥&nbsp;·&nbsp;通用后台系统</h1>
                    <p>Strive Everyday</p>
                </div>
                {/* 表单部分 */}
                <div className="form">
                    <Space direction="vertical" size="large" style={{ display: 'flex' }}>
                        <Input placeholder="用户名" onChange={usernameChange}/>
                        <Input.Password placeholder="密码" onChange={passwordChange}/>
                        {/* 验证码盒子 */}
                        <Button type="primary" onClick={handleLogin} className="loginBtn" block>登录</Button>
                    </Space>
                </div>
            </div>
        </div>
    )
};